<template>
  <div class="myOrder">
    <div class="top">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待付款" name="first">
          <div class="sub-main" v-loading="loading">
            <OrderList :flag="flag" :orderList="orderList" :total="total" :page="page" @handleCurrentChange="handleCurrentChange"></OrderList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待发货" name="second">
          <div class="sub-main" v-loading="loading">
            <OrderList :flag="flag" :orderList="orderList" :total="total" :page="page" @handleCurrentChange="handleCurrentChange"></OrderList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待收货" name="third">
          <div class="sub-main" v-loading="loading">
            <OrderList :flag="flag" :orderList="orderList" :total="total" :page="page" @handleCurrentChange="handleCurrentChange"></OrderList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待评价" name="fourth">
          <div class="sub-main" v-loading="loading">
            <OrderList :flag="flag" :orderList="orderList" :total="total" :page="page" @handleCurrentChange="handleCurrentChange"></OrderList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="fiveth">
          <div class="sub-main" v-loading="loading">
            <OrderList :flag="flag" :orderList="orderList" :total="total" :page="page" @handleCurrentChange="handleCurrentChange"></OrderList>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
import api from '../../../api'
import {listSearchMixin} from '../../../config/mixin'
import OrderList from '../../../components/base/orderList'
export default {
  mixins: [listSearchMixin],
  components: {
    OrderList
  },
  name: 'myOrder',
  data () {
    return {
      orderList: [],
      page: 1,
      activeName: 'first',
      state: '',
      cancelOrderShow: false,
      cancelId: null,
      deleteId: null,
      deleteOrderShow: false,
      confirmId: null,
      confirmShow: false,
      checked: false,
      total: 0,
      flag: true,
      loading: false
    }
  },
  mounted () {
    this.getOrderList()
    this.getTrolleyList()
  },
  methods: {
    ...mapMutations({
      setCartNumber: 'SET_CARTNUMBER',
      setShoppingCart: 'SET_SHOPPINGCART'
    }),
    // 获取订单列表
    getOrderList () {
      let self = this
      self.loading = true
      let params = {
          url: api.getOrderList + `?type=${self.state}&page=${self.page}&limit=5`,
          method: 'GET',
          data: {
          }
        }
        self.sendReq(params, (res) => {
          if (res.status === 200) {
            self.orderList = res.data.content
            self.total = res.data.totalElements
            if (self.orderList.length) {
              this.flag = true
            } else {
              this.flag = false
            }
            self.loading = false
          } else {
                self.$message({
                    message: res.msg,
                    type: 'warning'
                })
            }
        })
    },
    // 切换订单列表
    handleClick (event) {
      this.state = event.index
      this.page = 1
      this.getOrderList()
    },
    // 分页器跳转
    handleCurrentChange (val) {
      this.page = val
      this.getOrderList()
    },
    // 购物车列表
    async getTrolleyList () {
      const vm = this
      const params = {
        url: api.getTrolleyList,
        method: 'GET'
      }
      vm.sendReq(params, res => {
        const d = res.data.valid
        this.setShoppingCart(d)
        this.setCartNumber(d.length)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.myOrder{
  width: 100%;
  .top{
    width: 100%;
    font-size: 14px;
    box-sizing: border-box;
    position: relative;
    >>>.el-tabs{
      .el-tabs__header{
        border: 1px solid #E5E5E5;
        margin-bottom: 30px;
        height: 56px;
      }
      .el-tabs__nav{
        margin-left: 20px;
        height: 56px;
      }
      .el-tabs__item{
        height: 56px;
        line-height: 56px;
      }
      .el-tabs__nav-wrap::after{
        height: 0;
      }
    }
    >>>.search{
      font-size: 12px;
      margin-right: 20px;
      display: flex;
      position: absolute;
      height: 56px;
      display: flex;
      align-items: center;
      top: 0;
      right: 0;
      .el-input{
        flex: 3;
        border-radius: 0;
        .el-input__inner{
          border-radius: 0;
        }
        .el-input-group__append{
          border-radius: 0;
          border-left: 0;
          .el-button{
            border-left: 0;
          }
        }
      }
      .el-select{
        flex: 1;
        border-radius: 0;
        height: 40px;
      }
    }
  }
  >>>.cancelOrder,.confirm{
    .el-dialog__body{
      display: flex;
      justify-content: center;
      div{
        text-align: center;
        p{
          font-size: 16px;
        }
      }
    }
    .el-dialog__footer{
      .leftBtn{
        background-color: #FF7800;
        border: 1px solid #FF7800;
        color: #FFFFFF;
        border-radius: 0;
      }
      .rightBtn{
        color: #FF7800;
        border: 1px solid #FF7800;
        background-color: #FFFFFF;
        box-sizing: border-box;
        border-radius: 0;
      }
    }
  }
  >>>.refund{
    .el-dialog__body{
      display: flex;
      justify-content: center;
      background-color: #F8F8F8;
      padding: 20px 75px;
      box-sizing: border-box;
      .box{
        display: flex;
        flex-wrap: wrap;
        overflow-x: auto;
        height: 350px;
        width: 100%;
        text-align: center;
      }
      .el-checkbox{
        display: flex;
        align-items: center;
      }
      .el-checkbox__input{
        line-height: 18px;
      }
      .el-checkbox__label{
        font-size: 18px;
      }
      .back{
        width: 208px;
        padding: 10px 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        text-align: center;
        flex-direction: column;
        background-color: #FFFFFF;
        margin: 0 20px 20px 0;
        border: 1px solid transparent;
        position: relative;
        img{
          width: 171px;
          height: 171px;
        }
        .choice{
          width: 30px;
          height: 30px;
          position: absolute;
          bottom: 0;
          right: 0;
          display: none;
        }
      }
      .back:nth-of-type(3n){
        margin-right: 0;
      }
      .backActive{
        border: 1px solid #FF7800;
        .choice{
          display: block;
        }
      }
    }
    .el-dialog__footer{
      .leftBtn{
        background-color: #FF7800;
        border: 1px solid #FF7800;
        color: #FFFFFF;
        border-radius: 0;
      }
      .rightBtn{
        color: #FF7800;
        border: 1px solid #FF7800;
        background-color: #FFFFFF;
        box-sizing: border-box;
        border-radius: 0;
      }
    }
  }
}
.sub-main{
  min-height: 400px;
}
</style>
